<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例二</title>
    <style>
        body {
            background: url("../img/bg.png");
        }

        .center {
            background-color: whitesmoke;
            width: 400px;
            text-align: center;
            margin: auto;

        }


    </style>

</head>
<body>
<div>
    <img src="../img/logo.png">
</div>

<div class="center">
    <div>注册详情</div>
    <hr>
    <form action="#" method="get" autocomplete="off">
        <div>
            <label for="username">姓名：</label>
            <input type="text" id="username" name="username" placeholder="请在此输入用户名" value="" required><br></div>
        <div>
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" placeholder="请在此输入密码"><br></div>
        <div>
            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email" placeholder="请在此输入邮箱"><br></div>
        <div>
            <label for="tel">手机号：</label>
            <input type="tel" id="tel" name="tel" placeholder="请在此输入手机号"><br></div>
        <hr>
        <div>
            <label for="gender">性别：</label>
            <input type="radio" id="gender" name="gender" value="man" checked>男
            <input type="radio" name="gender" value="woman">女<br></div>
        <div>
            <label for="hobby">爱好：</label>
            <input type="checkbox" id="hobby" name="hobby" value="music">音乐
            <input type="checkbox" name="hobby" value="game">游戏
            <input type="checkbox" name="hobby" value="other">其他<br></div>
        <div>
            出生日期：
            <input type="date"><br></div>
        <!--        datetime-local-->
        <!--        <input type="datetime-local"><br>-->
        <!--        time-->
        <!--        <input type="time"><br>-->
        <!--        number-->
        <!--        <input type="number"><br>-->
        <!--        range-->
        <!--        <input type="range" min="1" max="10" step="1"><br>-->
        <!--        search-->
        <!--        <input type="search"><br>-->
        <!--        tel-->
        <!--        <input type="tel"><br>-->
        <!--        url-->
        <!--        <input type="url"><br>-->
        <!--        hidden-->
        <!--        <input type="hidden"><br>-->
        <div>
            所在城市：
            <select id="" name="">
                <option>请选择所在城市</option>
                <optgroup label="直辖市">

                    <option>北京</option>
                    <option>上海</option>
                </optgroup>

                <optgroup label="省会">
                    <option>合肥</option>
                    <option>杭州</option>
                </optgroup>
            </select><br>
        </div>
        <div>
            个人介绍
            <textarea name="textarea" rows="4" cols="40">
            </textarea> <br></div>
        <div>
            <button type="submit">提交</button>
            <button type="reset">重置</button>
            <button type="button">按钮</button>
        </div>

    </form>
</div>
</body>
</html>